<template>
  <div id="enterprise-license" style="width:100%;height:100%;pointer-events:all"></div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.getData();
  },
  created() {},
  methods: {
    // 获取证照类型数据
    getData() {
      this.$get('/literaryform/getGrade').then(res => {
        let arr = new Array()
        res.data.map((item) => {
          let obj = {
            name: item.grade,
            value: item.value
          }
          arr.push(obj)
        })
        this.renderEcharts(arr)
      })
    },
    // 渲染饼图
    renderEcharts(data) {
      let myChart = this.$echarts.init(document.getElementById("enterprise-license"));
      var option
      option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "#404C73",
          borderColor: "#404C73",
          textStyle: {
            color: '#FFF', // 文字的颜色
          }
        },
        legend: {
          textStyle: { color: '#fff' }
        },
        series: [
          {
            name: "旅游景区等级划分",
            type: "pie",
            center: ["50%", "57%"],
            radius: ["38%", "63%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
              borderWidth: 2,
            },
            label: {
              show: true,
              // position: "center",
              formatter: '{b}\n{c}({d}%)',
              color: '#fff'
            },
            labelLine: {
              show: true,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              }
            },
            data: data
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
